<template>
  <div class="cart-list container">
    <div class="header">
      <div :style="{width: columnWidth[0]}">
        <checkbox v-model="checkAll"
                  color>
          {{ columnText[0] }}
        </checkbox>
      </div>
      <div v-for="(item,index) in columnText.slice(1)"
           :style="{width: columnWidth[index + 1]}">
        {{ item }}
      </div>
    </div>
    <!-- 有商品时显示 -->
    <template v-if="store.list.length">
      <div class="body">
        <cart-list-item v-for="item in eList"
                        :key="item.skuId"
                        :column-width="columnWidth"
                        :data="item"/>
      </div>
      <div class="footer">
        <div v-show="store.unEList.length"
             class="title">无效商品
        </div>
        <cart-list-item v-for="item in unEList"
                        :key="item.skuId"
                        :column-width="columnWidth"
                        :data="item"/>
      </div>
    </template>
    <!-- 无商品时显示 -->
    <div v-else
         class="none">
      <img :src="noMore"/>
      <p>购物车内暂时没有商品</p>
      <router-link v-slot="{navigator}"
                   to="/">
        <div @click="navigator">继续逛逛</div>
      </router-link>
    </div>
  </div>
</template>

<script lang="ts"
        setup>
import noMore from '@/assets/images/no-more.png'
import CartListItem from '@/components/library/CartListItem.vue'
import Checkbox from '@/components/library/Checkbox.vue'
import {useCartStore} from '@/stores/cart'
import {storeToRefs} from 'pinia'
import {computed} from 'vue'

let store = useCartStore()
let {eList, unEList, esList} = storeToRefs(store)

const columnWidth = ['120px', '400px', '220px', '180px', '180px', '140px']
const columnText = ['全选', '商品信息', '单价', '数量', '小计', '操作']

let checkAll = computed({
  get(): boolean {
    return eList.value.every(item => item.selected)
  },
  set(v: boolean) {
    eList.value.forEach(item => item.selected = v)
    store.updateAll()
  }
})
</script>

<style lang="less"
       scoped>
.cart-list {
  background-color: #fff;
  border-radius: 2px;
  margin-bottom: 20px;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 70px;
    border-bottom: 1px solid #f5f5f5;

    > div {
      text-align: center;
      font-size: 16px;

      &:nth-of-type(1) {
        color: @xtxColor;
      }
    }
  }

  .footer {
    .title {
      line-height: 70px;
      padding-left: 30px;
      font-size: 16px;
      color: #666666;
      border: 1px solid #f5f5f5;
      border-left: none;
      border-right: none;
    }
  }

  .none {
    height: 535px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    img {
      width: 180px;
      height: 120px;
    }

    p {
      color: #999999;
      margin: 20px 0;
    }

    div {
      cursor: pointer;
      background-color: @xtxColor;
      border-radius: 4px;
      width: 180px;
      height: 50px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ffffff;
    }
  }
}
</style>